import React, { useMemo, useState, useEffect } from "react";

/**
 * EduNext — Interactive Prototype (5 Key Pages)
 * Single-file React app with simple client-side routing and demo data.
 * Pages: Home, Catalog, Course Detail, Enrollment, Dashboard
 * Styling: Tailwind CSS (available in this environment by default)
 */

// -----------------------------
// Demo data
// -----------------------------
const CATEGORIES = ["Data", "Design", "Business", "Technology"]; 
const LEVELS = ["Beginner", "Intermediate", "Advanced"]; 

const demoCourses = [
  {
    id: "c1",
    title: "Data Analytics Foundations",
    category: "Data",
    level: "Beginner",
    rating: 4.7,
    price: 89,
    duration: "6 weeks",
    language: "English",
    certificate: true,
    thumbnail: "",
    overview:
      "Kickstart your analytics journey: spreadsheets, SQL basics, and telling stories with charts.",
    outcomes: [
      "Read and clean data",
      "Build basic dashboards",
      "Query with SELECT and WHERE",
    ],
    syllabus: [
      { w: 1, t: "Intro to data & ethics" },
      { w: 2, t: "Spreadsheets & formulas" },
      { w: 3, t: "Data viz fundamentals" },
      { w: 4, t: "SQL basics" },
      { w: 5, t: "Mini project" },
      { w: 6, t: "Presenting insights" },
    ],
    instructor: { name: "A. Patel", role: "Senior Analyst" },
  },
  {
    id: "c2",
    title: "UX Design Essentials",
    category: "Design",
    level: "Beginner",
    rating: 4.6,
    price: 79,
    duration: "4 weeks",
    language: "English",
    certificate: true,
    thumbnail: "",
    overview:
      "Human-centered design, wireframing, and usability testing for practical projects.",
    outcomes: ["Create wireframes", "Run basic tests", "Present UX rationale"],
    syllabus: [
      { w: 1, t: "Research & personas" },
      { w: 2, t: "IA & wireframes" },
      { w: 3, t: "Prototyping" },
      { w: 4, t: "Usability testing" },
    ],
    instructor: { name: "L. Chen", role: "Product Designer" },
  },
  {
    id: "c3",
    title: "Python for Data Science",
    category: "Technology",
    level: "Intermediate",
    rating: 4.8,
    price: 99,
    duration: "8 weeks",
    language: "English",
    certificate: true,
    thumbnail: "",
    overview:
      "Write Python to wrangle, visualize, and model data using pandas and scikit-learn.",
    outcomes: ["Pandas workflows", "Plotly charts", "Train/test models"],
    syllabus: [
      { w: 1, t: "Python refresh" },
      { w: 2, t: "pandas dataframes" },
      { w: 3, t: "Visualization" },
      { w: 4, t: "ML intro" },
      { w: 5, t: "Model evaluation" },
      { w: 6, t: "Project" },
      { w: 7, t: "Peer review" },
      { w: 8, t: "Showcase" },
    ],
    instructor: { name: "M. Rivera", role: "Data Scientist" },
  },
  {
    id: "c4",
    title: "Digital Marketing Sprint",
    category: "Business",
    level: "Beginner",
    rating: 4.4,
    price: 59,
    duration: "3 weeks",
    language: "English",
    certificate: false,
    thumbnail: "",
    overview:
      "Plan and run campaigns: SEO, email, and social media fundamentals with hands-on tasks.",
    outcomes: ["SEO basics", "Email flows", "Campaign metrics"],
    syllabus: [
      { w: 1, t: "Audience & messaging" },
      { w: 2, t: "Channels & content" },
      { w: 3, t: "Measure & learn" },
    ],
    instructor: { name: "S. Ahmed", role: "Growth Lead" },
  },
];

// -----------------------------
// Small utilities & primitives
// -----------------------------
const Star = ({ filled }: { filled: boolean }) => (
  <span aria-hidden className={"inline-block text-lg " + (filled ? "opacity-90" : "opacity-20")}>★</span>
);

function Rating({ value }: { value: number }) {
  const full = Math.round(value);
  return (
    <div className="flex items-center gap-1" aria-label={`Rating ${value} out of 5`}>
      {Array.from({ length: 5 }).map((_, i) => (
        <Star key={i} filled={i < full} />
      ))}
      <span className="ml-1 text-sm text-slate-500">{value.toFixed(1)}</span>
    </div>
  );
}

function Button({ children, onClick, variant = "primary", type = "button", disabled=false }: any) {
  const base = "px-4 py-2 rounded-2xl text-sm font-semibold focus:outline-none focus:ring-2 focus:ring-offset-2 transition active:scale-[.98]";
  const styles =
    variant === "primary"
      ? "bg-blue-600 text-white hover:bg-blue-700 focus:ring-blue-600"
      : variant === "ghost"
      ? "bg-transparent text-blue-700 hover:bg-blue-50 focus:ring-blue-600"
      : variant === "secondary"
      ? "bg-amber-500 text-slate-900 hover:bg-amber-600 focus:ring-amber-500"
      : "bg-slate-200 text-slate-900 hover:bg-slate-300 focus:ring-slate-400";
  return (
    <button type={type} disabled={disabled} onClick={onClick} className={`${base} ${styles} disabled:opacity-50`}>
      {children}
    </button>
  );
}

function Tag({ children }: any) {
  return <span className="px-2 py-1 rounded-full text-xs bg-blue-50 text-blue-700">{children}</span>;
}

// -----------------------------
// App shell & router
// -----------------------------

type Route = "home" | "catalog" | "course" | "enroll" | "dashboard";

export default function App() {
  const [route, setRoute] = useState<Route>("home");
  const [query, setQuery] = useState("");
  const [filters, setFilters] = useState({ category: "All", level: "All" });
  const [selectedCourse, setSelectedCourse] = useState<any>(null);
  const [enrollments, setEnrollments] = useState<any[]>([]);

  // simple persistence for demo
  useEffect(() => {
    const saved = localStorage.getItem("edunext_enrollments");
    if (saved) setEnrollments(JSON.parse(saved));
  }, []);
  useEffect(() => {
    localStorage.setItem("edunext_enrollments", JSON.stringify(enrollments));
  }, [enrollments]);

  const navigate = (r: Route) => setRoute(r);

  return (
    <div className="min-h-screen bg-slate-50 text-slate-900">
      <Header onNav={navigate} onLogo={() => navigate("home")} gotoDashboard={() => navigate("dashboard")} />

      <main className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 pb-24">
        {route === "home" && (
          <Home onBrowse={() => navigate("catalog")} />
        )}
        {route === "catalog" && (
          <Catalog
            query={query}
            setQuery={setQuery}
            filters={filters}
            setFilters={setFilters}
            onOpen={(course: any) => {
              setSelectedCourse(course);
              navigate("course");
            }}
          />
        )}
        {route === "course" && selectedCourse && (
          <CourseDetail
            course={selectedCourse}
            onBack={() => navigate("catalog")}
            onEnroll={(course: any) => {
              setSelectedCourse(course);
              navigate("enroll");
            }}
          />
        )}
        {route === "enroll" && selectedCourse && (
          <Enrollment
            course={selectedCourse}
            onCancel={() => navigate("course")}
            onConfirm={(record: any) => {
              setEnrollments((prev) => [record, ...prev]);
              navigate("dashboard");
            }}
          />
        )}
        {route === "dashboard" && (
          <Dashboard
            enrollments={enrollments}
            onOpen={(courseId: string) => {
              const found = demoCourses.find((c) => c.id === courseId);
              if (found) {
                setSelectedCourse(found);
                navigate("course");
              }
            }}
          />
        )}
      </main>

      <Footer />
    </div>
  );
}

function Header({ onNav, onLogo, gotoDashboard }: any) {
  return (
    <header className="bg-white border-b sticky top-0 z-40">
      <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 h-16 flex items-center justify-between">
        <button aria-label="EduNext Home" onClick={onLogo} className="text-2xl font-extrabold tracking-tight text-blue-700">
          EDU<span className="text-slate-900">NEXT</span>
        </button>
        <nav className="hidden md:flex gap-6 text-sm font-medium">
          <button className="hover:text-blue-700" onClick={() => onNav("home")}>Home</button>
          <button className="hover:text-blue-700" onClick={() => onNav("catalog")}>Catalog</button>
          <button className="hover:text-blue-700" onClick={() => onNav("dashboard")}>Dashboard</button>
        </nav>
        <div className="flex gap-2">
          <Button variant="ghost" onClick={() => onNav("catalog")}>Browse Courses</Button>
          <Button onClick={gotoDashboard}>Sign In</Button>
        </div>
      </div>
    </header>
  );
}

function Footer() {
  return (
    <footer className="border-t py-10 text-sm text-slate-500 bg-white">
      <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 flex flex-col md:flex-row gap-4 md:items-center md:justify-between">
        <p>© {new Date().getFullYear()} EduNext. All rights reserved.</p>
        <div className="flex gap-6">
          <a className="hover:text-slate-700" href="#" onClick={(e)=>e.preventDefault()}>Accessibility</a>
          <a className="hover:text-slate-700" href="#" onClick={(e)=>e.preventDefault()}>Privacy</a>
          <a className="hover:text-slate-700" href="#" onClick={(e)=>e.preventDefault()}>Help</a>
        </div>
      </div>
    </footer>
  );
}

// -----------------------------
// Page: Home
// -----------------------------
function Home({ onBrowse }: any) {
  const featured = demoCourses.slice(0, 3);
  return (
    <div className="py-12">
      <section className="grid lg:grid-cols-2 gap-10 items-center">
        <div>
          <h1 className="text-4xl md:text-5xl font-extrabold tracking-tight leading-tight">Learn Without Limits</h1>
          <p className="mt-4 text-lg text-slate-600 max-w-prose">
            High‑quality online courses across data, design, business, and technology — designed to be accessible and
            results‑driven.
          </p>
          <div className="mt-6 flex gap-3">
            <Button onClick={onBrowse}>Get Started</Button>
            <Button variant="secondary" onClick={onBrowse}>Browse Catalog</Button>
          </div>
          <div className="mt-6 flex gap-2 items-center">
            <Rating value={4.7} />
            <span className="text-sm text-slate-500">Trusted by 50k+ learners</span>
          </div>
        </div>
        <div className="bg-gradient-to-br from-blue-50 to-amber-50 rounded-3xl p-6 border">
          <div className="grid sm:grid-cols-3 gap-4">
            {featured.map((c) => (
              <div key={c.id} className="bg-white rounded-2xl p-4 border">
                <div className="h-24 rounded-xl bg-slate-100 mb-3" />
                <h3 className="font-semibold leading-snug">{c.title}</h3>
                <div className="mt-1 flex gap-2 items-center text-xs">
                  <Tag>{c.category}</Tag>
                  <span className="text-slate-500">{c.level}</span>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      <section className="mt-14">
        <h2 className="text-2xl font-bold">Why EduNext?</h2>
        <ul className="mt-4 grid md:grid-cols-3 gap-4 text-slate-600">
          <li className="bg-white p-4 rounded-2xl border">Accessible design • WCAG‑minded components</li>
          <li className="bg-white p-4 rounded-2xl border">Career‑aligned outcomes & certificates</li>
          <li className="bg-white p-4 rounded-2xl border">Mobile‑first, bite‑sized lessons</li>
        </ul>
      </section>
    </div>
  );
}

// -----------------------------
// Page: Catalog with search & filters
// -----------------------------
function Catalog({ query, setQuery, filters, setFilters, onOpen }: any) {
  const results = useMemo(() => {
    return demoCourses.filter((c) => {
      const matchesQuery = c.title.toLowerCase().includes(query.toLowerCase());
      const catOk = filters.category === "All" || c.category === filters.category;
      const lvlOk = filters.level === "All" || c.level === filters.level;
      return matchesQuery && catOk && lvlOk;
    });
  }, [query, filters]);

  return (
    <div className="py-10">
      <h1 className="text-3xl font-bold">Course Catalog</h1>

      <div className="mt-6 grid md:grid-cols-4 gap-3">
        <div className="md:col-span-2">
          <label className="sr-only" htmlFor="search">Search</label>
          <input
            id="search"
            value={query}
            onChange={(e) => setQuery(e.target.value)}
            placeholder="Search for courses"
            className="w-full rounded-2xl border px-4 py-3 focus:ring-2 focus:ring-blue-600 outline-none"
          />
        </div>
        <select
          aria-label="Filter by category"
          value={filters.category}
          onChange={(e) => setFilters((f: any) => ({ ...f, category: e.target.value }))}
          className="rounded-2xl border px-4 py-3 focus:ring-2 focus:ring-blue-600"
        >
          <option>All</option>
          {CATEGORIES.map((c) => (
            <option key={c}>{c}</option>
          ))}
        </select>
        <select
          aria-label="Filter by level"
          value={filters.level}
          onChange={(e) => setFilters((f: any) => ({ ...f, level: e.target.value }))}
          className="rounded-2xl border px-4 py-3 focus:ring-2 focus:ring-blue-600"
        >
          <option>All</option>
          {LEVELS.map((l) => (
            <option key={l}>{l}</option>
          ))}
        </select>
      </div>

      <div className="mt-6 grid sm:grid-cols-2 lg:grid-cols-3 gap-5">
        {results.map((c: any) => (
          <article key={c.id} className="bg-white rounded-2xl border p-4 flex flex-col">
            <div className="h-32 bg-slate-100 rounded-xl mb-3" />
            <h3 className="font-semibold text-lg leading-tight">{c.title}</h3>
            <div className="mt-1 flex gap-2 items-center text-xs">
              <Tag>{c.category}</Tag>
              <span className="text-slate-500">{c.level}</span>
            </div>
            <div className="mt-2 flex items-center justify-between">
              <Rating value={c.rating} />
              <span className="font-semibold">£{c.price}</span>
            </div>
            <div className="mt-3 flex gap-2">
              <Button onClick={() => onOpen(c)}>View Details</Button>
              <Button variant="ghost" onClick={() => onOpen(c)}>Quick Enroll</Button>
            </div>
          </article>
        ))}
      </div>

      {results.length === 0 && (
        <p className="mt-10 text-slate-500">No courses match your search. Try clearing filters.</p>
      )}
    </div>
  );
}

// -----------------------------
// Page: Course Detail with syllabus & related
// -----------------------------
function CourseDetail({ course, onBack, onEnroll }: any) {
  const related = demoCourses.filter((c) => c.category === course.category && c.id !== course.id);
  const [openWeeks, setOpenWeeks] = useState<Record<number, boolean>>({});
  return (
    <div className="py-10">
      <button className="text-sm text-blue-700 hover:underline" onClick={onBack}>&larr; Back to Catalog</button>

      <div className="mt-4 grid lg:grid-cols-3 gap-8">
        <div className="lg:col-span-2">
          <div className="h-56 bg-slate-200 rounded-2xl border" aria-hidden />
          <h1 className="mt-4 text-3xl font-bold">{course.title}</h1>
          <div className="mt-2 flex gap-2 items-center">
            <Rating value={course.rating} />
            <Tag>{course.level}</Tag>
            <Tag>{course.duration}</Tag>
            {course.certificate && <Tag>Certificate</Tag>}
          </div>
          <p className="mt-4 text-slate-700 leading-relaxed max-w-prose">{course.overview}</p>

          <h2 className="mt-8 text-xl font-semibold">Syllabus</h2>
          <ul className="mt-2 divide-y bg-white rounded-2xl border">
            {course.syllabus.map((it: any) => (
              <li key={it.w}>
                <button
                  className="w-full text-left px-4 py-3 flex items-center justify-between hover:bg-slate-50"
                  onClick={() => setOpenWeeks((o) => ({ ...o, [it.w]: !o[it.w] }))}
                  aria-expanded={!!openWeeks[it.w]}
                >
                  <span className="font-medium">Week {it.w}: {it.t}</span>
                  <span aria-hidden>{openWeeks[it.w] ? "−" : "+"}</span>
                </button>
                {openWeeks[it.w] && (
                  <div className="px-4 pb-3 text-sm text-slate-600">Detailed topics & resources for this week.</div>
                )}
              </li>
            ))}
          </ul>
        </div>

        <aside className="lg:col-span-1">
          <div className="bg-white rounded-2xl border p-5 sticky top-24">
            <div className="text-3xl font-extrabold">£{course.price}</div>
            <p className="text-sm text-slate-500">Includes lifetime access</p>
            <div className="mt-4">
              <Button onClick={() => onEnroll(course)}>Enroll Now</Button>
            </div>
            <div className="mt-4 text-sm">
              <div className="font-semibold">Instructor</div>
              <div>{course.instructor.name} • {course.instructor.role}</div>
            </div>
          </div>

          {related.length > 0 && (
            <div className="mt-6">
              <h3 className="font-semibold mb-2">Related courses</h3>
              <ul className="space-y-2">
                {related.map((r) => (
                  <li key={r.id} className="bg-white p-3 rounded-xl border text-sm">
                    {r.title}
                  </li>
                ))}
              </ul>
            </div>
          )}
        </aside>
      </div>
    </div>
  );
}

// -----------------------------
// Page: Enrollment (2-step demo with validation)
// -----------------------------
function Enrollment({ course, onCancel, onConfirm }: any) {
  const [step, setStep] = useState(1);
  const [form, setForm] = useState({ name: "", email: "", phone: "" });
  const [payment, setPayment] = useState({ card: "", exp: "", cvc: "" });
  const [consent, setConsent] = useState(false);

  const canNext = form.name && form.email.includes("@");
  const canPay = payment.card.length >= 12 && payment.exp && payment.cvc.length >= 3 && consent;

  function handleConfirm() {
    const record = {
      id: `${course.id}-${Date.now()}`,
      courseId: course.id,
      title: course.title,
      startedAt: new Date().toISOString(),
      progress: 0.05,
    };
    onConfirm(record);
  }

  return (
    <div className="py-10">
      <h1 className="text-3xl font-bold">Enroll in {course.title}</h1>
      <nav className="mt-4 flex items-center gap-2 text-sm">
        <StepDot active={step === 1}>Personal Info</StepDot>
        <span className="text-slate-400">→</span>
        <StepDot active={step === 2}>Payment</StepDot>
        <span className="text-slate-400">→</span>
        <StepDot active={step === 3}>Confirm</StepDot>
      </nav>

      {step === 1 && (
        <section className="mt-6 bg-white p-6 rounded-2xl border grid md:grid-cols-2 gap-4">
          <Field label="Full Name">
            <input className="w-full border rounded-xl px-3 py-2" value={form.name} onChange={(e)=>setForm({...form,name:e.target.value})} />
          </Field>
          <Field label="Email Address">
            <input className="w-full border rounded-xl px-3 py-2" value={form.email} onChange={(e)=>setForm({...form,email:e.target.value})} />
          </Field>
          <Field label="Phone Number">
            <input className="w-full border rounded-xl px-3 py-2" value={form.phone} onChange={(e)=>setForm({...form,phone:e.target.value})} />
          </Field>
          <div className="md:col-span-2 flex gap-3">
            <Button variant="ghost" onClick={onCancel}>Back</Button>
            <Button onClick={()=>setStep(2)} disabled={!canNext}>Continue</Button>
          </div>
        </section>
      )}

      {step === 2 && (
        <section className="mt-6 bg-white p-6 rounded-2xl border grid md:grid-cols-2 gap-4">
          <Field label="Card Number">
            <input className="w-full border rounded-xl px-3 py-2" value={payment.card} onChange={(e)=>setPayment({...payment,card:e.target.value})} />
          </Field>
          <Field label="Expiry (MM/YY)">
            <input className="w-full border rounded-xl px-3 py-2" value={payment.exp} onChange={(e)=>setPayment({...payment,exp:e.target.value})} />
          </Field>
          <Field label="CVC">
            <input className="w-full border rounded-xl px-3 py-2" value={payment.cvc} onChange={(e)=>setPayment({...payment,cvc:e.target.value})} />
          </Field>
          <label className="md:col-span-2 flex items-center gap-2 text-sm">
            <input type="checkbox" checked={consent} onChange={(e)=>setConsent(e.target.checked)} />
            I agree to the terms and privacy policy.
          </label>
          <div className="md:col-span-2 flex gap-3">
            <Button variant="ghost" onClick={()=>setStep(1)}>Back</Button>
            <Button onClick={()=>setStep(3)} disabled={!canPay}>Review</Button>
          </div>
        </section>
      )}

      {step === 3 && (
        <section className="mt-6 bg-white p-6 rounded-2xl border">
          <h2 className="text-xl font-semibold">Review & Confirm</h2>
          <ul className="mt-3 text-sm text-slate-700 space-y-1">
            <li><span className="font-medium">Course:</span> {course.title}</li>
            <li><span className="font-medium">Price:</span> £{course.price}</li>
            <li><span className="font-medium">Learner:</span> {form.name} ({form.email})</li>
          </ul>
          <div className="mt-4 flex gap-3">
            <Button variant="ghost" onClick={()=>setStep(2)}>Back</Button>
            <Button onClick={handleConfirm}>Confirm Enrollment</Button>
          </div>
        </section>
      )}
    </div>
  );
}

function StepDot({ active, children }: any) {
  return (
    <span className={`inline-flex items-center gap-2 px-3 py-1 rounded-full border ${active?"bg-blue-600 text-white border-blue-600":"bg-white text-slate-700"}`}>
      <span className={`h-2 w-2 rounded-full ${active?"bg-white":"bg-slate-400"}`} /> {children}
    </span>
  );
}

function Field({ label, children }: any) {
  return (
    <label className="block text-sm">
      <span className="text-slate-700 font-medium">{label}</span>
      <div className="mt-1">{children}</div>
    </label>
  );
}

// -----------------------------
// Page: Dashboard with progress & resume actions
// -----------------------------
function Dashboard({ enrollments, onOpen }: any) {
  return (
    <div className="py-10">
      <h1 className="text-3xl font-bold">Your Dashboard</h1>

      {enrollments.length === 0 ? (
        <p className="mt-4 text-slate-600">You have no active enrollments yet. Browse the catalog to get started.</p>
      ) : (
        <div className="mt-6 grid sm:grid-cols-2 lg:grid-cols-3 gap-5">
          {enrollments.map((e: any) => (
            <article key={e.id} className="bg-white rounded-2xl border p-4">
              <div className="h-24 bg-slate-100 rounded-xl mb-3" />
              <h3 className="font-semibold leading-tight">{e.title}</h3>
              <div className="mt-2 flex items-center gap-2">
                <progress className="w-full" value={e.progress} max={1} aria-label="Progress" />
                <span className="text-sm text-slate-500">{Math.round(e.progress * 100)}%</span>
              </div>
              <div className="mt-3 flex gap-2">
                <Button onClick={() => onOpen(e.courseId)}>View</Button>
                <Button variant="ghost" onClick={() => onOpen(e.courseId)}>Resume</Button>
              </div>
            </article>
          ))}
        </div>
      )}

      <section className="mt-12">
        <h2 className="text-xl font-semibold">Recommended for you</h2>
        <div className="mt-4 grid sm:grid-cols-2 lg:grid-cols-3 gap-4">
          {demoCourses.slice(0, 3).map((c) => (
            <div key={c.id} className="bg-white p-4 rounded-2xl border">
              <div className="h-24 bg-slate-100 rounded-xl mb-3" />
              <div className="font-medium">{c.title}</div>
              <div className="text-sm text-slate-500">{c.category} • {c.level}</div>
            </div>
          ))}
        </div>
      </section>
    </div>
  );
}
